<%@ page contentType="text/html; charset=utf-8" %>

<%@ include file="/WEB-INF/jsp/includeTop.jsp" %>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript" src="<c:url value='/js/chinamap/chinamap.js' />"></script>

<div id="mapContainer" style="height: 58%;">Loading...</div>

<table width="100%" border="0" cellpadding="0" cellspacing="5">
  <tr>
    <td valign="top">
      <table class="dbborder" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="bottom" class="blueTableBg">&nbsp;分析报表&nbsp;-&nbsp;督导任务执行统计
          <span><a onclick="showHideData(this);" status="open" href="javascript:;">隐藏</a></span>
          </td>
        </tr>
															
<%-- 		<%@ include file="/WEB-INF/jsp/project/projectSearch.jsp" %>         --%>
        <tr>
          <td>
            <table id="reportListDataTable" width="100%" border="0" cellpadding="0" cellspacing="5">
              <tr>
                <td>
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td class="dashTopLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashTop" width=100%><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashTopRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                    </tr>
                    
                    <tr>
                      <td class="dashLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td align="center">
                        <table width="100%" border="0" cellpadding="0" cellspacing="0">
											  <tr>
											     <td>
										       	<div id="reportListData" class="pageDiv">
															<%@ include file="/WEB-INF/jsp/report/taskPerformanceRate/reportListDataCityMap.jsp" %>
										       	</div>
											     </td>
											   </tr>
                        </table><p/>
                      </td>
                      <td class="dashRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                    </tr>
                    <tr>
                      <td class="dashBottomLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashBottom" width=100%><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashBottomRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<script type="text/javascript">
// 	<c:if test="${!empty standardAdminDivAreaCode}">
// 		<c:if test="${adminDivLevelDeep == 6}">
// 			listDefaultPageAjax('reportListData','reportForm','<c:url value="/report/storeOpeningRate/reportListData/6/${standardAdminDivAreaCode}.html" />');
// 		</c:if>
// 		<c:if test="${adminDivLevelDeep == 1}">
// 		listDefaultPageAjax('reportListData','reportForm','<c:url value="/report/storeOpeningRate/reportListData/1/${standardAdminDivAreaCode}.html" />');
// 		</c:if>
// 	</c:if>	
</script>

	<script type="text/javascript">
		$(document).ready(function() {
	
		var map = new BMap.Map("mapContainer");
		
		var cityOrProvinceAdName = "${standardAdminDivAreaName}";
		var mapZoomLevel = "${mapZoomLevel}";
		
		//初始化地图,设置中心点坐标和地图级别，13是一个相对合适的用于城区级别展示的ZOOM等级
		//初始化地图,设置中心点坐标和地图级别，8是一个相对合适的用于省市级别展示的ZOOM等级
		map.centerAndZoom(cityOrProvinceAdName, mapZoomLevel);
		
		//启用鼠标滚轮控制地图Zoom		
		//map.enableScrollWheelZoom();
		
		//启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图
		map.enableKeyboard();
		
		//启用部分地图辅助控件
		map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));//BMAP_HYBRID_MAP 卫星图
		map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
		var opts = {anchor: BMAP_ANCHOR_BOTTOM_LEFT  , offset: new BMap.Size(10, 90)};
		map.addControl(new BMap.NavigationControl(opts));//添加鱼骨控件
		
		//创建地址解析器实例  
		var myGeo = new BMap.Geocoder();
	
		<c:if test="${adminDivLevelDeep == 2}">
	    var bdary = new BMap.Boundary();
	    map.clearOverlays();
// 	    bdary.get(cityOrProvinceAdName, function(rs){
// 	        var count = rs.boundaries.length;
// 	        for(var i = 0; i < count; i++){
// 	            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"});
// 	            //map.addOverlay(ply);
// 							map.setViewport(ply.getPath());
// 	        }                
// 	    });

			<c:forEach var="tpr" items="${taskPerformanceRates}" varStatus="status">
				var areaName = "${tpr.adminDivAreaName}"; 
		    bdary.get(areaName, function(rs){
		        var count = rs.boundaries.length;
		        for(var i = 0; i < count; i++){
		            var ply = new BMap.Polygon(rs.boundaries[i], {fillColor:getColorByPercent("${tpr.percentIntValue}"), strokeWeight: 2, strokeColor: "#ff0000"});
		            
		            map.addOverlay(ply);
		            ply.addEventListener("click", function(){
		            	
 		            	var confirmDialogShow = "${tpr.adminDivAreaName}\n计划任务数:${tpr.plannedQuantityOfTask}/实际任务数:${tpr.actualQuantityOfTask} 任务执行率:${tpr.percentValueFormatted}\n确定要进入吗?";
									if(window.confirm(confirmDialogShow)) {
										window.location = "<c:url value='/report/taskPerformanceRate/reportList/2/${tpr.adminDivAreaCode}.html' />";
									} else {
										return false;
									}
		            });  
		        }                
		    });
			</c:forEach>
		</c:if>
		
		<c:if test="${adminDivLevelDeep == 3}">		
			var taskDoneMarkerImg = "<c:url value='/images/marker-storeopened.png' />";
			var taskDoneIcon = new BMap.Icon(taskDoneMarkerImg, new BMap.Size(20, 30));
			
			<c:forEach var="plannedTask" items="${plannedTasksDetail}" varStatus="status">
				renderTasks("${plannedTask.storeChannelAddress}", "${plannedTask.empName}","${plannedTask.projEmpTitle}","${plannedTask.jobName}", "${plannedTask.storeChannelAdName}", "${plannedTask.storeChannelCityAdName}", "${plannedTask.projectName}", true);
			</c:forEach>
			
			<c:forEach var="actualTask" items="${actualTasksDetail}" varStatus="status">
				renderTasks("${actualTask.storeChannelAddress}", "${actualTask.empName}","${actualTask.projEmpTitle}","${actualTask.jobName}", "${actualTask.storeChannelAdName}", "${actualTask.storeChannelCityAdName}", "${actualTask.projectName}", false);
			</c:forEach>
		</c:if>
		
		function renderTasks(storeAddress, executorName, executorTitle, jobName, storeAdName, storeCityAdName, projectName, isRenderTaskPlannedRemained) {
			//将地址解析结果显示在地图上，并调整地图视野
			//不合法的地址将无法显示在地图上
			myGeo.getPoint(storeAddress, function(point) {
				if (point) {
					var marker;
					if (isRenderTaskPlannedRemained == true) {
						marker = new BMap.Marker(point);
					} else {
						marker = new BMap.Marker(point, {icon: taskDoneIcon});
					}
					
					//相同地址的位置标记可能会被遮盖,因此简单地启用拖动,TODO:jay 自动留出offset...
					marker.enableDragging();
					
					var opts = {
					  title : "执行人: "+executorName+"("+executorTitle+")<br/>任务: "+ jobName  // 信息窗口标题
					}			
					map.addOverlay(marker);
					var content = "地址: "+storeAddress + "["+storeAdName+"/"+storeCityAdName+"]" + "<br/>项目: "+projectName;
					var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
					marker.addEventListener("click", function() {
						this.openInfoWindow(infoWindow);  
					});
				}
			}, cityOrProvinceAdName);
		}
			
		});
	</script>
	
	
	<script type="text/javascript">
		//addFunnScreemButton();
		
		function showHideData(obj){
			if(obj.getAttribute("status")=='open'){
				$("#reportListDataTable").fadeOut();
				$("#mapContainer").css("height","100%");
				obj.setAttribute("status","close");
				obj.innerHTML="展开";
			}else{
				$("#reportListDataTable").fadeIn();
				$("#mapContainer").css("height","58%");
				obj.setAttribute("status","open");
				obj.innerHTML="隐藏";
			}
		}
	</script>